<template>
  <div class="menuTreeOption" ref="menuTreeOption">
    <!--菜单树标题-->
    <div class="menuTreeTitle">
        <table width="100%">
              <thead>
                  <tr>
                    <td>业务名称</td>
                    <td width="20%" class="tac">状态</td>
                    <td width="25%" class="tac">关闭起始时间</td>
                    <td width="25%" class="tac">关闭截止时间</td>
                  </tr>
              </thead>   
        </table>
    </div>
    <!--菜单树标题--END-->
    <!--菜单树节点 brhId -->
    <div class="menuTreeData" v-for="item1 in busiControlList">
      <!--一级菜单节点-->
      <div class="menuTreeLevel_1" :menuId="item1.bsnCode">
          <table width="100%">
              <tr>
                <td class="treeDashed"><span @click="showMenu" class="menuTreeIcon"><i>+</i>{{item1.bsnName}}</span></td>
                <td width="20%" class="tac"></td>
                <td width="25%" class="tac"></td>
                <td width="25%" class="tac"></td>
              </tr>
          </table>
      </div>
      <!--一级菜单节点--END-->
      <!--二级菜单节点-->
      <div class="menuTreeLevel_2_list hide">
        <template v-for="(item2,index) in item1.childrens">
          <!--没有三级菜单节点-->
          <div class="menuTreeLevel_2" v-if="!item2.childrens" :menuId="item2.bsnCode">
              <table width="100%">
                  <tr>
                    <td class="treeDashed"><span class="treeDashed"></span>{{item2.bsnName}}</td>
                    <td width="20%" class="tac">
                        <el-radio-group v-model="item2.bsnStt" @change="checkboxChange(item2.bsnStt,item2)" class="menuTreeOption">
                          <el-radio label="0" >开启</el-radio>
                          <el-radio label="1" >关闭</el-radio>
                        </el-radio-group>
                    </td>
                    <td width="25%" class="tac">
                        <el-date-picker v-model="item2.startTime" @change="selectStartTime(item2.startTime,item2)" format="yyyy-MM-dd HH:mm" :picker-options="pickerOptions" type="datetime" placeholder="选择日期时间" v-if="item2.bsnStt==0? false:true"> </el-date-picker>
                    </td>
                    <td width="25%" class="tac">
                        <el-date-picker v-model="item2.endTime" @change="selectEndTime(item2.endTime,item2)" format="yyyy-MM-dd HH:mm" type="datetime" :picker-options="pickerOptions" placeholder="选择日期时间" v-if="item2.bsnStt==0? false:true"> </el-date-picker>
                    </td>
                  </tr>
              </table> 
          </div>
          <!--没有三级菜单节点--END-->
          <!--有三级菜单节点-->
          <template v-else>
            <div class="menuTreeLevel_2" :menuId="item2.bsnCode">
                <table width="100%">
                    <tr>
                      <td class="treeDashed"><span class="treeDashed"></span><span @click="showMenu" class="menuTreeIcon"><i>+</i>{{item2.bsnName}}</span></td>
                      <td width="20%" class="tac"></td>
                      <td width="25%" class="tac"></td>
                      <td width="25%" class="tac"></td>
                    </tr>
                </table> 
            </div>
            <!--三级菜单节点-->
            <div class="menuTreeLevel_3_list hide">
              <template v-for="(item3,index) in item2.childrens">
                <div class="menuTreeLevel_3" :menuId="item3.bsnCode">
                    <table width="100%">
                        <tr>
                        	<td class="treeDashed"><span class="treeDashed"></span><strong class="treeDashed"></strong>{{item3.bsnName}}</td>
                          <td width="20%" class="tac">
                               <el-radio-group v-model="item3.bsnStt" @change="checkboxChange(item3.bsnStt,item3)" class="menuTreeOption">
                                  <el-radio label="0" >开启</el-radio>
                                  <el-radio label="1" >关闭</el-radio>
                              </el-radio-group>
                          </td>
                          <td width="25%" class="tac">
                              <el-date-picker v-model="item3.startTime" @change="selectStartTime(item3.startTime,item3)" format="yyyy-MM-dd HH:mm" :picker-options="pickerOptions" type="datetime" placeholder="选择日期时间" v-if="item3.bsnStt==0? false:true"> </el-date-picker>
                          </td>
                          <td width="25%" class="tac">
                              <el-date-picker v-model="item3.endTime" @change="selectEndTime(item3.endTime,item3)" format="yyyy-MM-dd HH:mm" type="datetime" :picker-options="pickerOptions" placeholder="选择日期时间" v-if="item3.bsnStt==0? false:true"> </el-date-picker>
                          </td>
                        </tr>
                    </table> 
                </div>
              </template>
            </div>
            <!--三级菜单节点--END-->
          </template>
          <!--有三级菜单节点-->
        </template>
      </div>
      <!--二级菜单节点--END-->
    </div>
    <!--菜单树节点--END-->
  </div>
</template>
<script>
export default {
  name: 'businessControlTree',
  componentName: 'businessControlTree',
  data() {
    return {
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          },
        },
      menuTree:[],
      selectData:[],//提交给后台的修改的数据
      selectTimeData:[],//选中的时间数据
      selectSttData:[],//选中的状态
      rules:{
        endTime:[{validator:this.$tools.validator.timeCompare,trigger:'blur'}],
        startTime:[],
      },
      compareDate:{startYear:'',endYear:'',startMonth:'',endMonth:'',startDay:'',endDay:'',startHour:'',endHour:'',startMinute:'',endMinute:'',bsnCode:'',},
      compare:[],//存放比较的时间
    }
  },
  props: {
      busiControlList: { type: Array, default: [] },//菜单树
      busiControl:{type: Array, default: []},//未修改前的数据,用来判断数据是否修改
    },
    
  // this.$tools.validator.timeCompare
  methods:{
    selectStartTime(s,val){//选择的开始时间
      let startTime=this.$tools.utils.formatDate(s,{toMinite:true})
      for(let i=0;i<this.selectData.length;i++){
        if(this.selectData[i].bsnCode==val.bsnCode){
          this.selectData[i].startTime=startTime;
          this.selectTimeData[i].startTime=s
          break;
        }
      }
      console.log("modifyData:"+JSON.stringify(this.selectData))
      this.$emit('modifyData',this.selectData)
    },
    selectEndTime(s,val){//选择的结束时间

      let endTime=this.$tools.utils.formatDate(s,{toMinite:true})
      for(let i=0;i<this.selectData.length;i++){
        if(this.selectData[i].bsnCode==val.bsnCode){        
          //判断时间是否满足条件
          this.selectData[i].endTime=endTime;
          break;
        }
      }
      this.selectTimeData=this.selectData
      console.log("modifyData:"+JSON.stringify(this.selectData))
      this.$emit('modifyData',this.selectData)   
    },
    showMenu(eve){
      $(eve.currentTarget).closest("div").next("div").slideToggle();
			if($(eve.currentTarget).find("i").html()=="+"){
				  $(eve.currentTarget).find("i").html("-")
			}else{
				  $(eve.currentTarget).find("i").html("+")
			}
    },
    checkboxChange(stt,eve){
        for(let i=0;i<this.selectData.length;i++){
          if(this.selectData[i].bsnCode==eve.bsnCode){
            this.selectData.splice(i,1);
            break;
          }
        }
        this.selectData.push(eve)
        this.$emit('modifyData',this.selectData)
		},
  },
}
</script>
<style  lang="scss">
@import '../../../styles/vars.scss';
.menuTreeOption td{ border:1px solid #ddd; line-height:40px; padding:0px;}
.menuTreeOption thead td{background:#eee; font-weight:bold; font-size:14px; text-align:center;}
.menuTreeOption td.treeDashed{background:url(../../../images/common/dashed.png) no-repeat 20px center; padding-left:50px;}
.menuTreeOption span.treeDashed,.menuTreeOption strong.treeDashed{background:url(../../../images/common/dashed.png) no-repeat; display:block; width:30px; float:left; height:40px;}
.menuTreeOption .menuTreeLevel_1 td.treeDashed,.menuTreeOption .menuTreeLevel_2 span.treeDashed,.menuTreeOption .menuTreeLevel_3 strong.treeDashed{background:url(../../../images/common/dashed_left.png) no-repeat left center;}
.menuTreeOption .menuTreeLevel_1 td.treeDashed{background-position:20px center;}
.menuTreeOption .menuTreeIcon{position:relative;  display:inline-block; background:#FFF;}
.menuTreeOption .menuTreeIcon i{display:inline-block; width:16px; height:16px; overflow:hidden; text-align:center; line-height:16px; border:1px solid #ddd; position:absolute; background:#eee; font-style:normal; cursor:pointer; left:-34px; top:10px; }
.menuTreeData,.menuData,.menuTreeLevel_2,.menuTreeLevel_3{margin-top:-1px;}
.menuTreeOption .hide{display:none;}
</style>
